<template>
  <div class="divBox">
    <div class="header clearfix">
      <div class="container">
        <el-form inline size="small"  @submit.native.prevent>
          <el-form-item label="优惠劵名称：">
            <el-input v-model="tableFrom.coupon_name" @keyup.enter.native="getList(1)" placeholder="请输入优惠券名称" class="selWidth" clearable size="small" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="getList(1)">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="tableData.data"
      size="small"
      max-height="400"
      tooltip-effect="dark"
    >
      <el-table-column v-if="!newGift" key="2" width="55">  
        <template slot-scope="scope">
          <el-radio
            v-model="templateRadio"
            :label="scope.row.coupon_id"
            @change.native="getTemplateRow(scope.row)"
          >&nbsp</el-radio>
        </template>
      </el-table-column>
      <el-table-column v-if="newGift" key="3" width="55">
        <template slot="header" slot-scope="scope">
          <el-checkbox
            slot="reference"
            :value="isChecked && checkedPage.indexOf(tableFrom.page) > -1"
            @change="changeType"
          />
        </template>
        <template slot-scope="scope">
          <el-checkbox :value="checkIds.indexOf(scope.row.coupon_id) > -1" @change="(v) => changeOne(v, scope.row)" />
        </template>
      </el-table-column>
      <el-table-column
        prop="coupon_id"
        label="ID"
        min-width="50"
      />
      <el-table-column
        prop="title"
        label="优惠券名称"
        min-width="120"
      />
      <el-table-column
        label="优惠劵类型"
        min-width="100"
      >
        <template slot-scope="{ row }">
          <span>{{ row.type | couponTypeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="coupon_price"
        label="优惠券面值"
        min-width="90"
      />
      <el-table-column
        label="最低消费额"
        min-width="90"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.use_min_price===0?'不限制':scope.row.use_min_price }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="有效期限"
        min-width="150"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.coupon_type===1?scope.row.use_start_time+'-'+scope.row.use_end_time:scope.row.coupon_time+'天' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="剩余数量"
        min-width="90"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.is_limited===0 ? '不限量' : scope.row.remain_count }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="!newGift" key="1" label="操作" min-width="120" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="small" class="mr10" :disabled="multipleSelection.coupon_id != scope.row.coupon_id" @click="send(scope.row.coupon_id)">发送</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block mb20">
      <el-pagination
        background
        :page-size="tableFrom.limit"
        :current-page="tableFrom.page"
        layout="total, prev, pager, next, jumper"
        :total="tableData.total"
        @size-change="handleSizeChange"
        @current-change="pageChange"
      />
    </div>
    <div v-if="newGift">
      <el-button size="small" type="primary" class="fr" @click="ok">确定</el-button>
      <el-button size="small" class="fr mr20" @click="close">取消</el-button>
    </div>
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { couponSendApi, platformLstApi } from '@/api/marketing'
import { roterPre } from '@/settings'
export default {
  name: 'CouponList',
  props: {
    couponForm: {
      type: Object,
      default: () => {},
    },
    checkedIds: {
      type: Array,
      default: []
    },
    allCheck: {
      type: Boolean,
      default: false
    },
    userFrom: {
      type: Object,
      default: () => {},
    },
    newGift: {
      type: Boolean,
      default: false
    },
    checkedData: {
      type: Array,
      default: function () {
        return [];
      }
    }
  },
  data() {
    return {
      roterPre: roterPre,
      listLoading: true,
      tableData: {
        data: [],
        total: 0
      },
      tableFrom: {
        page: 1,
        limit: 5,
        not_send_type: 5,
        send_type: 6,
        coupon_name: '',
        status: 1
      },
      multipleSelection: {
        coupon_id: ''
      },
      templateRadio: 0,
      checkedPage: [],
      checkBox: [],
      isChecked: false,
      checkIds: [], 
    }
  },
  mounted() {
    this.tableFrom.page = 1
    this.getList(1)
  },
  methods: {
    getTemplateRow(row) {
      this.multipleSelection = { coupon_id: row.coupon_id };
      // this.$emit("getCouponData", this.multipleSelection);
    },
    // 发送优惠券
    send(id){
      delete this.userFrom['page']
      delete this.userFrom['limit']
      let that = this;
      that.$confirm('确定要发送优惠券吗？发送优惠券后将无法恢复，请谨慎操作！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            coupon_id: id,
            search: that.userFrom,
            mark: that.filter(this.couponForm),
            is_all: that.allCheck ? 1 : 0,
            uid: that.checkedIds   
          }
          couponSendApi(params).then(res => {
            that.$message.success(res.message)
            that.$emit("sendSuccess");
          }).catch(res => {
            that.$message.error(res.message)
          })
        }).catch(action => {
          that.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    filter(data) {
      for ( var key in data ){
        if ( data[key] === '' ){
          delete data[key]
        }
      }
      return data
    },
    changeType(v) {
      this.isChecked = v;
      const index = this.checkedPage.indexOf(this.tableFrom.page);
      this.isIndex = index;
      this.checkedPage.push(this.tableFrom.page);
      if (index > -1) {
        this.checkedPage.splice(index, 1);
      }
      this.syncCheckedId(v);
    },
    changeOne(v, row) {
      if (v) {
        const index = this.checkIds.indexOf(row.coupon_id);
        if (index === -1) {
          this.checkIds.push(row.coupon_id);
          this.checkBox.push(row);
        }
      } else {
        const index = this.checkIds.indexOf(row.coupon_id);
        if (index > -1) {
          this.checkIds.splice(index, 1);
          this.checkBox.splice(index, 1);
        }
      }
    },
    syncCheckedId(o) {
      const ids = this.tableData.data.map((v) => v.coupon_id);
      if (o) {
        this.tableData.data.forEach((item) => {
          const index = this.checkIds.indexOf(item.coupon_id);
          if (index === -1) {
            this.checkIds.push(item.coupon_id);
            this.checkBox.push(item);
          }
        });
      } else {
        this.tableData.data.forEach((item) => {
          const index = this.checkIds.indexOf(item.coupon_id);
          if (index > -1) {
            this.checkIds.splice(index, 1);
            this.checkBox.splice(index, 1);
          }
        });
      }
    },
    ok(){
      this.tableFrom.coupon_name = "";
      this.$emit('sendSuccess', this.checkBox, this.checkIds);
    },
    close(){
      this.$emit('close');
    },
    // 列表
    getList(num) {
      this.listLoading = true
      this.tableFrom.page = num ? num : this.tableFrom.page
      platformLstApi(this.tableFrom).then(res => {
        this.tableData.data = res.data.list
        this.tableData.total = res.data.count
        if(this.newGift)this.setCheckedProduct(this.checkedData);
        this.listLoading = false     
      }).catch(res => {
        this.listLoading = false
        this.$message.error(res.message)
      })
    },
    // 默认勾选
    setCheckedProduct(checkedData){
      if (checkedData.length) {
        let [...arr2] = checkedData;
        this.checkBox = arr2;
        this.checkIds = arr2.map((item) => {
          return item.coupon_id;
        });
      }else{
        this.checkIds = []
      }
    },
    pageChange(page) {
      this.tableFrom.page = page
      this.getList('')
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val
      this.getList('')
    }
  }
}
</script>

<style scoped lang="scss">
  .seachTiele{
    line-height: 35px;
  }
  .fr{
    float: right;
  }
</style>
